<template>
  <div class="full-right">

    <div class="full-right-table">
      <div class="full-right-table-title">
        {{ table1.title }}
      </div>
      <dv-scroll-board :config="tableData.data" style="width:100%;height:90%" />
    </div>
    <div class="full-right-chart">
      <div class="full-right-chart-title">
        {{ echarts.title }}
      </div>
      <VEcharts
        autoresize
        :options="echarts.options"
        style="width: 100%; height: 90%"
      />
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import VEcharts from '@/components/vecharts';
export default {
  components: {
    VEcharts
  },
  props: {
    echarts: {
      type: Object,
      default: () => ([])
    },
    table: {
      type: Object,
      default: () => ({})
    },
    table1: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    tableData() {
      const data = _.cloneDeep(this.table1);
      // const tableData = data.data && data.data.data;
      // tableData && tableData.length && tableData.forEach(i => {
      //   i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
      //   i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
      //   // if (i[3] === '低风险') {
      //   //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
      //   // } else if (i[3] === '中风险') {
      //   //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
      //   // } else if (i[3] === '高风险') {
      //   //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
      //   // }
      //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
      // });
      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
.full-right{
  padding: 20px;
  font-size: 18px;
  .full-right-table{
    background-image: url('~@/assets/images/fullscreen/xmlx.png');
    background-size: 100% 100%;
    padding: 10px;
    height: 55%;
    .full-right-table-title{
      height: 10%;
      color: #1fd2ff;
      padding-left: 20px;
    }
    .dv-scroll-board{
      color: #1fd2ff;
    }
  }
  .full-right-chart{
    margin-top: 10px;
    background-image: url('~@/assets/images/fullscreen/xmlx.png');
    background-size: 100% 100%;
    padding: 10px;
    height: calc(45% - 10px);
    .full-right-chart-title{
      height: 10%;
      color: #1fd2ff;
      padding-left: 20px;
    }
  }
}
</style>
